<template>
  <el-dialog v-model="props.modelValue"   title="管理员界面" width="1150" style="height: 650px;overflow-y: auto;" @close="handleDialogClose" align-center>
    <div class="centerDiv">
      <el-tabs tab-position="top" v-model="AllTabsValue" @click="handleClickAll()"
        style="height: 500px;overflow-y: auto;margin-top: 10px;" class="demo-tabs">
        <el-tab-pane label="实时资讯">
          <el-table :data="matData" style="width: 100%">
            <el-table-column prop="id" label="资讯ID" width="100" />
            <el-table-column prop="title" label="资讯名称" width="150" />
            <el-table-column prop="content" label="资讯介绍" width="200" />
            <el-table-column prop="publishDate" label="发布时间" width="180" />
            <el-table-column prop="image" label="图片路径" width="250">
              <template #default="scope">
                <el-image :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button size="small" @click="mateEdit(scope.$index, scope.row)">
                  修改
                </el-button>
                <el-button size="small" type="danger" @click="mateDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="所有用户">
          <el-table :data="userData" style="width: 100%">
            <el-table-column prop="id" label="用户ID" width="100" />
            <el-table-column prop="username" label="用户名称" width="150" />
            <el-table-column prop="realName" label="真实名称" width="100" />
            <el-table-column prop="phone" label="手机号码" width="150" />
            <el-table-column prop="gender" label="性别" width="100" />
            <el-table-column prop="age" label="年龄" width="100" />
            <el-table-column prop="password" label="密码" width="300">
              <template #default="scope">
                {{ displayPassword(scope.row.password) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button size="small" @click="userEdit(scope.$index, scope.row)">
                  修改
                </el-button>
                <el-button size="small" type="danger" @click="userDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="所有课程">
          <el-table :data="courData" style="width: 100%">
            <el-table-column prop="id" label="课程ID" width="100" />
            <el-table-column prop="courseName" label="课程名称" width="100" />
            <el-table-column prop="teacherName" label="任课教师" width="100" />
            <el-table-column prop="introduction" label="课程介绍" width="200" />
            <el-table-column prop="startDate" label="开始时间" width="180" />
            <el-table-column prop="endDate" label="结束时间" width="180" />
            <el-table-column prop="image" label="图片路径" width="250">
              <template #default="scope">
                <el-image :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button size="small" @click="courEdit(scope.$index, scope.row)">
                  修改
                </el-button>
                <el-button size="small" type="danger" @click="courDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="所有竞赛">
          <el-table :data="comData" style="width: 100%;height: 100%;">
            <el-table-column prop="id" label="竞赛ID" width="100" />
            <el-table-column prop="title" label="竞赛名称" width="150" />
            <el-table-column prop="content" label="竞赛介绍" width="300" />
            <el-table-column prop="publishDate" label="宣布时间" width="180" />
            <el-table-column prop="image" label="图片路径" width="250">
              <template #default="scope">
                <el-image :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button size="small" @click="comEdit(scope.$index, scope.row)">
                  修改
                </el-button>
                <el-button size="small" type="danger" @click="comDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="统计分析" name="统计分析">
          <Analys :model-value="centerDialog" @update:modelValue="handleDialogUpdate" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog v-model="innerVisible" width="500" title="增加信息" append-to-body align-center>
      <el-tabs type="border-card" v-model="TabsValue" @tab-click="handleClick">
        <el-tab-pane label="资讯" name="资讯">
          <el-form :label-position="left" label-width="auto" :model="mateForm" style="max-width: 600px">
            <el-form-item label="ID">
              <el-input v-model="mateForm.id" />
            </el-form-item>
            <el-form-item label="资讯名称">
              <el-input v-model="mateForm.title" />
            </el-form-item>
            <el-form-item label="资讯介绍">
              <el-input v-model="mateForm.content" />
            </el-form-item>
            <el-form-item label="发布时间">
              <el-date-picker v-model="mateForm.publishDate" type="datetime" placeholder="选择时间" />
            </el-form-item>
            <el-form-item label="资源类型">
              <el-input v-model="mateForm.category" />
            </el-form-item>
            <el-form-item label="图片上传">
              <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
                action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传小于500KB的 jpg/png文件.
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane label="用户" name="用户">
          <el-form :label-position="left" label-width="auto" :model="userForm" style="max-width: 600px">
            <el-form-item label="ID">
              <el-input v-model="userForm.id" disabled />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="userForm.username" />
            </el-form-item>
            <el-form-item label="实名">
              <el-input v-model="userForm.realName" />
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userForm.age" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userForm.gender" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.password" />
            </el-form-item>
            <el-form-item label="图片上传">
              <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
                action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传小于500KB的 jpg/png文件.
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="课程" name="课程">
          <el-form :label-position="left" label-width="auto" :model="courForm" style="max-width: 600px">
            <el-form-item label="ID">
              <el-input v-model="courForm.id" disabled />
            </el-form-item>
            <el-form-item label="课程名称">
              <el-input v-model="courForm.courseName" />
            </el-form-item>
            <el-form-item label="课程介绍">
              <el-input v-model="courForm.introduction" />
            </el-form-item>
            <el-form-item label="任课老师">
              <el-input v-model="courForm.teacherName" />
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker v-model="courForm.startDate" type="datetime" placeholder="选择时间" />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="courForm.endDate" type="datetime" placeholder="选择时间" />
            </el-form-item>
            <el-form-item label="图片上传">
              <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
                action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传小于500KB的 jpg/png文件.
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="竞赛" name="竞赛">
          <el-form :label-position="left" label-width="auto" :model="comForm" style="max-width: 600px">
            <el-form-item label="ID">
              <el-input v-model="comForm.id" disabled />
            </el-form-item>
            <el-form-item label="资讯名称">
              <el-input v-model="comForm.title" />
            </el-form-item>
            <el-form-item label="资讯介绍">
              <el-input v-model="comForm.content" />
            </el-form-item>
            <el-form-item label="发布时间">
              <el-date-picker v-model="comForm.publishDate" type="datetime" placeholder="选择时间" />
            </el-form-item>
            <el-form-item label="资源类型">
              <el-input v-model="comForm.category" />
            </el-form-item>
            <el-form-item label="图片上传">
              <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
                action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传小于500KB的 jpg/png文件.
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>  
      </el-tabs> 
    </el-dialog>
    <template #footer>
      <div class="dialogFooter">
        <el-button @click="innerVisible = true">增加信息</el-button>
        <el-button type="primary" @click="handleDialogClose">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="mateDialog" title="编辑资讯信息" width="500" align-center>
    <el-form :label-position="left" label-width="auto" :model="mateForm" style="max-width: 600px">
      <el-form-item label="ID">
        <el-input v-model="mateForm.id" disabled />
      </el-form-item>
      <el-form-item label="资讯名称">
        <el-input v-model="mateForm.title" />
      </el-form-item>
      <el-form-item label="资讯介绍">
        <el-input v-model="mateForm.content" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-input v-model="mateForm.publishDate" />
      </el-form-item>
      <el-form-item label="资源类型">
        <el-input v-model="mateForm.category" />
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
          action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传小于500KB的 jpg/png文件.
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="mateDialog = false">取消</el-button>
        <el-button type="primary" @click="mateConfimeUp()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="userDialog" title="编辑用户信息" width="500" align-center>
    <el-form :label-position="left" label-width="auto" :model="userForm" style="max-width: 600px">
      <el-form-item label="ID">
        <el-input v-model="userForm.id" disabled />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="userForm.username" />
      </el-form-item>
      <el-form-item label="实名">
        <el-input v-model="userForm.realName" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="userForm.age" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="userForm.gender" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="userForm.password" />
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
          action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传小于500KB的 jpg/png文件.
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="userDialog = false">取消</el-button>
        <el-button type="primary" @click="userConfimeUp()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="courDialog" title="编辑课程信息" width="500" align-center>
    <el-form :label-position="left" label-width="auto" :model="courForm" style="max-width: 600px">
      <el-form-item label="ID">
        <el-input v-model="courForm.id" disabled />
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="courForm.courseName" />
      </el-form-item>
      <el-form-item label="课程介绍">
        <el-input v-model="courForm.introduction" />
      </el-form-item>
      <el-form-item label="任课老师">
        <el-input v-model="courForm.teacherName" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input v-model="courForm.startDate" />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input v-model="courForm.endDate" />
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
          action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传小于500KB的 jpg/png文件.
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="courDialog = false">取消</el-button>
        <el-button type="primary" @click="courConfimeUp()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="comDialog" title="编辑竞赛信息" width="500" align-center>
    <el-form :label-position="left" label-width="auto" :model="comForm" style="max-width: 600px">
      <el-form-item label="ID">
        <el-input v-model="comForm.id" disabled />
      </el-form-item>
      <el-form-item label="资讯名称">
        <el-input v-model="comForm.title" />
      </el-form-item>
      <el-form-item label="资讯介绍">
        <el-input v-model="comForm.content" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-input v-model="comForm.publishDate" />
      </el-form-item>
      <el-form-item label="资源类型">
        <el-input v-model="comForm.category" />
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload v-model:file-list="fileList" :headers="headers" class="upload-demo"
          action="http://159.75.72.12:8088/image/upload" multiple :limit="3" :on-success="uploadSuccess">
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传小于500KB的 jpg/png文件.
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="comDialog = false">取消</el-button>
        <el-button type="primary" @click="comConfimeUp()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted,defineProps, defineEmits } from 'vue'
import { solution, getCompetition, getCourse, getAllUser, addAllDate, upAllDate, delAllDate } from "../api/function"
import Analys from "../components/analys.vue"

const TabsValue = ref("资讯");
const AllTabsValue = ref("实时资讯")
  
// 接收父组件传递的 modelValue prop  
const props = defineProps({  
  modelValue: {  
    type: Boolean,  
    default: false  
  }  
})  
  
// 发出 update:modelValue 事件  
const emit = defineEmits(['update:modelValue'])  
  
// 如果您需要在子组件内部更改弹窗的显示状态，您可以这样做：  
function closeDialog() {  
  emit('update:modelValue', false)  
} 
  
// 弹窗的显示状态，与父组件的 modelValue 保持同步  
const dialogVisible = props.modelValue  
  
// 处理弹窗关闭事件  
function handleDialogClose() {  
  // 发出事件通知父组件更新 modelValue  
  emit('update:modelValue', false)  
}  

import { useTokenStore } from '@/stores/token.js'
const innerVisible = ref(false);

const comData = ref([])
const comDialog = ref(false)
const matData = ref([])
const mateDialog = ref(false)
const userData = ref([])
const userDialog = ref(false)
const courData = ref([])
const courDialog = ref(false)

onMounted(() => {
  refreshData();
});

const refreshData = () => {
  solution().then((res) => {
    console.log("资讯");
    console.log(res.data);
    matData.value = res.data;
  })
  getCompetition().then((res) => {
    comData.value = res.data;
  })
  getCourse().then((res) => {
    courData.value = res.data;
  })
  getAllUser().then((res) => {
    userData.value = res.data;
  })
}

const fileList = ref([]);
const tokenStore = useTokenStore();

import { useStore } from 'vuex';
const store = useStore();

const imgURl = ref();
// 上传成功的回调
const uploadSuccess = (res, upload) => {
  imgURl.value = res.data;
  console.log(TabsValue.value);
  if (TabsValue.value == '资讯') {
    mateForm.value.image = res.data;
  } else if (TabsValue.value == '资讯') {
    mateForm.value.image = res.data;
  } else if (TabsValue.value == '资讯') {
    mateForm.value.image = res.data;
  } else if (TabsValue.value == '资讯') {
    mateForm.value.image = res.data;
  }
  console.log(imgURl.value);
}
const centerDialog = ref(false);
const handleClickAll = () => {
  console.log(AllTabsValue.value);
  if(AllTabsValue.value == '统计分析'){
    centerDialog.value = true;
  }
}

const handleDialogUpdate = (newValue) => {  
      // 当子组件更新 modelValue 时，这里会接收到新值  
      centerDialog.value = newValue; 
      AllTabsValue.value = 0
    } 

// 资讯表单
const mateForm = ref({
  id: '',
  title: '',
  content: '',
  publishDate: '',
  category: 'StudyMaterial',
  image: imgURl.value
})
const mateEdit = (index, row) => {
  mateForm.value = row;
  mateDialog.value = true;
}
const mateConfimeUp = () => { // 资讯修改
  upAllDate(mateForm.value, AllTabsValue.value).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      refreshData();
      mateDialog.value = false;
    }
  })
}
const mateDelete = (index, row) => { // 资讯删除
  delAllDate(row.id, AllTabsValue.value).then((res) => {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    refreshData();
  })
}

// 用户表单
const userForm = ref({
  id: '',
  username: '',
  realName: '',
  age: '',
  gender: '',
  password: ''
})
const userEdit = (index, row) => {
  userForm.value = row;
  userDialog.value = true;
}
const userConfimeUp = () => { // 用户修改
  upAllDate(userForm.value, AllTabsValue.value).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      refreshData();
      userDialog.value = false;
    }
  })
}
const userDelete = (index, row) => { // 用户删除
  delAllDate(row.id, AllTabsValue.value).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      refreshData();
    }
  })
}

// 课程表单
const courForm = ref({
  id: '',
  courseName: '',
  introduction: '',
  teacherName: '',
  startData: '',
  endDate: '',
  image: imgURl.value
})
const courEdit = (index, row) => {
  courForm.value = row;
  courDialog.value = true;
}
const courConfimeUp = () => { // 课程修改
  upAllDate(courForm.value, AllTabsValue.value).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      refreshData();
      courDialog.value = false;
    }
  })
}
const courDelete = (index, row) => { // 课程删除
  delAllDate(row.id, AllTabsValue.value).then((res) => {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    refreshData();
  })
}

// 竞赛表单
const comForm = ref({
  id: '',
  title: '',
  content: '',
  publishDate: '',
  category: 'Competition',
  image: imgURl.value
})
const comEdit = (index, row) => {
  comForm.value = row;
  comDialog.value = true;
}
const comConfimeUp = () => { // 竞赛修改
  upAllDate(comForm.value, AllTabsValue.value).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      refreshData();
      comDialog.value = false;
    }
  })
}
const comDelete = (index, row) => { // 竞赛删除
  delAllDate(row.id, AllTabsValue.value).then((res) => {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    refreshData();
  })
}

// 增加信息模块中，根据模块判断传递的信息和调用的接口
const confime = () => {
  if (TabsValue.value == '资讯') {
    console.log(mateForm.value);
    addAllDate(mateForm.value, TabsValue.value).then((res) => {
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      refreshData();
    })
  } else if (TabsValue.value == '用户') {
    addAllDate(userForm.value, TabsValue.value).then((res) => {
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      refreshData();
    })
  } else if (TabsValue.value == '课程') {
    addAllDate(courForm.value, TabsValue.value).then((res) => {
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      refreshData();
    })
  } else if (TabsValue.value == '竞赛') {
    addAllDate(comForm.value, TabsValue.value).then((res) => {
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      refreshData();
    })
  }
  innerVisible.value = false;
}

const displayPassword = (password) => '*'.repeat(password.length);


</script>